<template>
  <div id='WkEmployeeHome'>
    <el-scrollbar style='height: 100%'>
      <div class='topThreeDiv'>
        <el-card>
          <div class='cardTitle'>日常考勤</div>
          <div class='data-analysis'>
            <el-calendar v-model='calendarValue1' ref='calendar'>
              <template #header='{ date }'>
                <span>{{ date }}</span>
                <div class='blueMark'><span style='width: 10px; height: 10px; background-color: #409eff; border-radius: 50%;display: inline-block;'></span> <span>正常</span></div>
                <div class='redMark'><span style='width: 10px; height: 10px; background-color: red; border-radius: 50%;display: inline-block;'></span> <span>异常</span></div>

                <el-button-group>
                  <el-button size='small' @click="selectDate('prev-month')">上个月</el-button>
                  <el-button size='small' @click="selectDate('today')">今天</el-button>
                  <el-button size='small' @click="selectDate('next-month')">下个月</el-button>
                </el-button-group>
              </template>
              <template #date-cell='{ date, data }'>
                <div>
                  <div v-for='(item, key) in activeday' :key='key'>
                    <div v-if='data.day == item.dat'>
                      <el-badge is-dot class='item' type='primary'>
                        <template #default>
                          <div class='spandate'>{{ data.day.split('-').slice(2).join('-') }}</div>
                        </template>
                      </el-badge>
                    </div>
                  </div>
                  <div v-for='(item, key) in errorday' :key='key'>
                    <div v-if='data.day == item.dat'>
                      <el-badge is-dot class='item'>
                        <template #default>
                          <div class='spandate'>{{ data.day.split('-').slice(2).join('-') }}</div>
                        </template>
                      </el-badge>
                    </div>
                  </div>
                  <div v-if='!activeday.find((item) => item.dat == data.day) && !errorday.find((item) => item.dat == data.day)'>
                    <div class='spandate'>{{ data.day.split('-').slice(2).join('-') }}</div>
                  </div>
                </div>
              </template>
            </el-calendar>
          </div>
        </el-card>

        <el-card>
          <h4>登录人：管理员</h4>
          <div>
            <span>组织机构：</span>
            <el-select v-model='searchForm.orgId' placeholder='请选择' ref='selectOrgRef' filterable style='width: 200px;'>
              <el-option hidden :value="searchForm.orgId ? searchForm.orgId : ''" :label='searchForm.name'></el-option>
              <el-tree
                filterable
                :data='orgList'
                :props="{children: 'children', label: 'name'}"
                :expand-on-click-node='false'
                :default-expand-all='true'
                @node-click='handleOrgNodeClick'
                highlight-current
                ref='orgTreeRef'
                node-key='id'
                class='tools-tree'
              ></el-tree>
            </el-select>
          </div>
        </el-card>

        <el-card>
          <div class='cardTitle'>标本上机</div>
          <div class='greyTotal'>
            <div class='greyTotalTitle'>今日总数 <span class='greyTotalNum'>133</span> /个</div>
            <div class='greyTotalTitle'>已上机 <span class='greyTotalNum'>133</span> /个</div>
            <div class='greyTotalTitle'>未上机 <span class='greyTotalNum'>133</span> /个</div>
          </div>
          <div>
            <el-radio-group v-model='radioSampleMachine' size='small' text-color='#fff' fill='#00b2cd'>
              <el-radio-button label='近7天' :value='sevenDays' />
              <el-radio-button label='近1个月' :value='oneMonths' />
              <el-radio-button label='近3个月' :value='threeMonths' />
            </el-radio-group>
          </div>
          <div class='progressTitle'>
            <div>日期</div>
            <div>已完成</div>
            <div>未完成</div>
          </div>
          <div class='progressBody' v-for='o in 7'>
            <div class='dates'>02-18</div>
            <div class='elProcessLine'>
              <el-progress :text-inside='true' :stroke-width='13' :percentage='70' status='exception' color='#00b2cd' show-text>
                <span>125</span>
              </el-progress>
            </div>
          </div>
        </el-card>
      </div>

      <div class='centerThreeDiv'>
        <el-card>
          <el-card class='box-card'>
            <vxe-table
              ref='todoListRef' border='inner' align='left' class='mytable-scrollbar'
              :data='todoList'
              :row-config='{ isCurrent: true }'
              :column-config='{ resizable: true }'
              show-overflow keep-source
              :scroll-y='{ enabled: true }'>
              <vxe-column type='seq' title='#' width='30'></vxe-column>
              <vxe-column field='a' title='代办事项'></vxe-column>
              <vxe-column field='b' title='代办内容'></vxe-column>
              <vxe-column field='ref' title='跳转'>
                <template #default='{ row }'>
                  <vxe-button type='text' status='primary' icon='vxe-icon-search' content='查看'></vxe-button>
                </template>
              </vxe-column>
            </vxe-table>
          </el-card>
        </el-card>

        <el-card>
          <div class='icon-box flex justify-start'>
            <div v-for='(item, index) in moduleList' :key='index' @click='gotoPage(item.baseUrl, item.id)'>
              <div class='icon-box-item'>
                <div class='moduleIcon' :style='{ backgroundColor: item.bigIconBgcolour }'>
                  <el-icon size='40' class='icon'>
                    <component :is='item.icon'></component>
                  </el-icon>
                </div>
                <div>{{ item.name }}</div>
              </div>
            </div>
          </div>
        </el-card>

        <el-card>
          <div class='cardTitle'>危急值</div>
          <div class='greyTotal'>
            <div class='greyTotalTitle'>今日总数 <span class='greyTotalNum'>133</span> /个</div>
            <div class='greyTotalTitle'>已上机 <span class='greyTotalNum'>133</span> /个</div>
            <div class='greyTotalTitle'>未上机 <span class='greyTotalNum'>133</span> /个</div>
          </div>
          <div>
            <el-radio-group v-model='radioCriticalValue' size='small' text-color='#fff' fill='#00b2cd'>
              <el-radio-button label='近7天' value='sevenDays' />
              <el-radio-button label='近1个月' value='oneMonths' />
              <el-radio-button label='近3个月' value='threeMonths' />
            </el-radio-group>
          </div>
          <div id='dbBarCharts' class='chart'></div>
        </el-card>
      </div>

      <div class='bottomTwoDiv'>
        <el-card>
          <div class='cardTitle'>任务处理</div>
          <div class='greyTotal'>
            <div class='greyTotalTitle'>今日总数 <span class='greyTotalNum'>133</span> /个</div>
            <div class='greyTotalTitle'>已处理 <span class='greyTotalNum'>133</span> /个</div>
            <div class='greyTotalTitle'>未处理 <span class='greyTotalNum'>133</span> /个</div>
            <div class='greyTotalTitle'>已超时 <span class='greyTotalNum'>133</span> /个</div>
          </div>
          <div>
            <el-radio-group v-model='radioTaskProcessing' size='small' text-color='#fff' fill='#00b2cd'>
              <el-radio-button label='近7天' value='sevenDays' />
              <el-radio-button label='近1个月' value='oneMonths' />
              <el-radio-button label='近3个月' value='threeMonths' />
            </el-radio-group>
          </div>
          <div id='ecList1' class='chart'></div>
        </el-card>
        <el-card>
          <div class='cardTitle'>设备保养</div>
          <div class='greyTotal'>
            <div class='greyTotalTitle'>今日总数 <span class='greyTotalNum'>133</span> /个</div>
            <div class='greyTotalTitle'>已处理 <span class='greyTotalNum'>133</span> /个</div>
            <div class='greyTotalTitle'>失控 <span class='greyTotalNum'>133</span> /个</div>
          </div>
          <div>
            <el-radio-group v-model='radioEquipMaintenance' size='small' text-color='#fff' fill='#00b2cd'>
              <el-radio-button label='近7天' value='sevenDays' />
              <el-radio-button label='近1个月' value='oneMonths' />
              <el-radio-button label='近3个月' value='threeMonths' />
            </el-radio-group>
          </div>
          <div id='dbLineCharts' class='chart'></div>
        </el-card>
        <el-card>
          <div class='cardTitle'>仪器质控</div>
          <div class='greyTotal'>
            <div class='greyTotalTitle'>今日总数 <span class='greyTotalNum'>133</span> /个</div>
            <div class='greyTotalTitle'>已处理 <span class='greyTotalNum'>133</span> /个</div>
            <div class='greyTotalTitle'>失控 <span class='greyTotalNum'>133</span> /个</div>
          </div>
          <div>
            <el-radio-group v-model='radioInstruQualControl' size='small' text-color='#fff' fill='#00b2cd'>
              <el-radio-button label='近7天' value='sevenDays' />
              <el-radio-button label='近1个月' value='oneMonths' />
              <el-radio-button label='近3个月' value='threeMonths' />
            </el-radio-group>
          </div>
          <div class='processCircle'>
            <div class='processBlue'>
              <div class='processChart'>
                <el-progress type='circle' :percentage='75' color='#00b2cd' :stroke-width='13' width='120'>
                  <span style='color: #00b2cd; font-weight: 700'>已处理</span>
                </el-progress>
              </div>
              <div class='processBlueDetail'>
                <div v-for='blue in 7' class='vforDateNum'>
                  <span></span>
                  <div>02-18: 125个</div>
                </div>
              </div>
            </div>
            <div class='processYellow'>
              <div class='processChart'>
                <el-progress type='circle' :percentage='75' color='#ffb765' :stroke-width='14' width='120'>
                  <span style='color: #ffb765; font-weight: 700'>失控</span>
                </el-progress>
              </div>
              <div class='processYellowDetail'>
                <div v-for='yellow in 7' class='vforDateNum'>
                  <span></span>
                  <div>02-18: 125个</div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import * as echarts from 'echarts';
import type { CalendarDateType, CalendarInstance } from 'element-plus';
import { notifyMessage, notifyType } from '@/utils/common';
import { AppStore } from '@/stores/store';

let radioSampleMachine = ref('近7天'); //标本上机
let radioCriticalValue = ref('近7天'); //危急值
let radioInstruQualControl = ref('近7天'); //仪器质控
let radioEquipMaintenance = ref('近7天'); //设备保养
let radioTaskProcessing = ref('近7天'); //任务处理
let { proxy }: any = getCurrentInstance();
let store = AppStore();
// 日历
let calendarValue1 = ref(new Date());
// 正常
let activeday = reactive([
  // 日历组件选中的日期，小红点，时间格式必须为yyyy-MM-dd，比如3月5号要写成03-05而不是3-5
  { dat: '2024-03-10' },
  { dat: '2024-03-11' },
  { dat: '2024-03-12' }
]);
// 异常
let errorday = reactive([
  // 日历组件选中的日期，小红点，时间格式必须为yyyy-MM-dd，比如3月5号要写成03-05而不是3-5
  { dat: '2024-03-14' },
  { dat: '2024-03-15' },
  { dat: '2024-03-05' }
]);

let todoList = reactive([
  {
    'id': '1795639327752245249',
    'a': '待办01',
    'b': '某某事件需要审核'
  },
  {
    'id': '1795639327752245249',
    'a': '待办02',
    'b': '某某事件审核未通过'
  }
]);
const orgList = store.userInfo.orgList;
const searchForm = reactive({
  orgId: store.userInfo.orgId,
  name: store.userInfo.orgName
});

function handleOrgNodeClick(data: any) {
  searchForm.orgId = data.id;
  searchForm.name = data.name;

  const selectOrgRef: any = proxy.$refs['selectOrgRef'];
  selectOrgRef.blur();
}

const calendar = ref<CalendarInstance>();
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return;
  calendar.value.selectDate(val);
};

let moduleList = reactive([]);

function finPermissionObj() {
  proxy.$http
    .get('/api/user/sysUserAuthDetail/getLoginUserAuthMapByUserId', {
      params: {
        userId: store.userInfo.id
      }
    })
    .then((res: any) => {
      if (res.status.code !== 1) {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
        return;
      }
      store.setRoleModel(res.data.modules);
      store.setModuleMenuMap(res.data.moduleMenuMap);
      store.setModulePointMap(res.data.modulePointCodeMap);
      store.setRptGroupList(res.data.rptGroupList);
      store.setInstrSetupList(res.data.instrSetupList);
      // console.log('模块数据', res.data);
      moduleList.push(...res.data.modules);
    })
    .catch((err: string) => {
      notifyMessage(err, notifyType.warning, proxy);
    });
}

onMounted(() => {
  finPermissionObj();
  const myChart = echarts.init(document.getElementById('dbBarCharts') as HTMLElement);

  const myChart2 = echarts.init(document.getElementById('dbLineCharts') as HTMLElement);

  const myChart3 = echarts.init(document.getElementById('ecList1') as HTMLElement);

  //双柱状图(危急值)
  myChart.setOption({
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      x: 30,
      y: 45,
      x2: 5,
      y2: 25,
      borderWidth: 1
    },
    legend: {
      data: ['已上报', '未上报'],
      right: '10%',
      top: '2%'
    },
    yAxis: {
      type: 'value'
    },
    xAxis: {
      type: 'category',
      data: ['02-18', '02-19', '02-20', '02-21', '02-22', '02-23', '02-24']
    },
    series: [
      {
        type: 'bar',
        name: '已上报',
        stack: 'total',
        data: [140, 90, 140, 122, 140, 122, 138]
      },
      {
        type: 'bar',
        name: '未上报',
        stack: 'total',
        data: [30, 20, 30, 26, 16, 18, 26]
      }
    ]
  });

  // 双折线图(设备保养)
  myChart2.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    grid: {
      x: 30,
      y: 45,
      x2: 5,
      y2: 25,
      borderWidth: 1
    },
    legend: {
      data: ['已保养', '未保养'],
      right: '10%'
    },
    xAxis: [
      {
        type: 'category',
        data: ['02-18', '02-19', '02-20', '02-21', '02-22', '02-23', '02-24']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '未保养',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [28, 6, 10, 0, 2, 18, 28]
      },
      {
        name: '已保养',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [160, 150, 152, 150, 152, 154, 160]
      }
    ]
  });

  // 柱状图——折线(任务处理)
  myChart3.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    grid: {
      x: 30,
      y: 45,
      x2: 5,
      y2: 25,
      borderWidth: 1
    },
    legend: {
      data: ['已处理', '未处理'],
      right: '10%'
    },
    xAxis: [
      {
        type: 'category',
        data: ['02-18', '02-19', '02-20', '02-21', '02-22', '02-23', '02-24'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        max: 180,
        interval: 50,
        axisLabel: {
          formatter: '{value}'
        }
      },
      //折线显示的右边轴
      {
        type: 'value',
        show: false,
        min: 0,
        max: 180,
        interval: 50,
        axisLabel: {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        name: '已处理',
        type: 'bar',
        tooltip: {
          valueFormatter: function(value) {
            return value;
          }
        },
        data: [149, 90, 149, 122, 140, 121, 147]
      },
      {
        name: '未处理',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function(value) {
            return value;
          }
        },
        data: [165, 28, 30, 0, 0, 29, 58]
      }
    ]
  });

  window.addEventListener('resize', function() {
    myChart.resize();
    myChart2.resize();
    myChart3.resize();
  });
});
</script>

<style lang='scss' scoped>
#WkEmployeeHome {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 8px;
  background-color: #f4f8fb;
  // 横着上面三个卡片
  .topThreeDiv {
    display: flex;

    .el-card {
      flex: 1;
      margin-right: 10px;

      &:last-child {
        margin-right: 0;
      }

      :deep(.el-card__body) {
        padding: 8px 10px;

        .cardTitle {
          font-size: 15px;
          font-weight: 700;
          margin: 0 0 5px 0;
        }

        .greyTotal {
          margin: 0 10px 5px 0;
          display: flex;
          align-items: center;

          .greyTotalTitle {
            background-color: #f8f9fb;
            color: #9e9ea0;
            font-size: 14px;
            padding: 5px 18px;
            margin-right: 10px;
            border-radius: 5px;

            .greyTotalNum {
              color: #000;
              font-size: 16px;
              font-weight: 700;
            }
          }
        }

        .progressTitle {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #9e9ea0;
          font-size: 12px;
          margin: 5px;
        }

        .progressBody {
          width: 100%;
          color: #9e9ea0;
          display: flex;
          margin-bottom: 2px;

          .dates {
            margin-right: 10px;
          }

          .elProcessLine {
            width: calc(100% - 50px);
          }
        }
      }
    }

    .userInfo {
      background: linear-gradient(to bottom, #20c2db, #01a4cd);

      .userTop {
        display: flex;

        .userCircleIcon {
          height: 80%;
        }

        .userDetail {
          margin-left: 10px;

          .userName {
            display: flex;

            span {
              color: #fff;
              font-size: 15px;
              font-weight: 700;
            }

            .ageSex {
              display: flex;
              align-items: center;
              justify-content: center;
              margin-left: 15px;

              img {
                height: 60%;
              }

              span {
                color: #fff;
                font-size: 14px;
                font-weight: 700;
                width: 50px;
                margin-left: 5px;
              }
            }
          }

          .userProfess {
            color: #fff;
            font-size: 14px;
            margin: 7px 0;
          }

          .userNumber {
            span {
              color: #fff;
              font-size: 14px;
              margin-right: 10px;
            }
          }
        }
      }

      .clockIn {
        display: flex;

        div {
          border: 1px solid #fff;
          padding: 4px 55px;
          font-size: 14px;
          font-weight: 700;
          color: #fff;
          margin: 5px;
          border-radius: 5px;
        }
      }

      .shadowCard {
        color: #fff;
        background-color: #3fc0dd;
        border-radius: 8px;
        display: flex;
        align-items: center;
        padding: 4px;
        margin-bottom: 6px;

        &:last-child {
          margin-bottom: 0;
        }

        div {
          width: 25%;
          text-align: center;
          vertical-align: middle;
          font-size: 13px;
        }

        .totalNumber,
        .alreadyupLoad,
        .noupLoad {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          span {
            font-size: 16px;
            font-weight: 700;
            margin-top: 10px;
          }
        }
      }
    }
  }

  // 中间横着三个卡片
  .centerThreeDiv {
    display: flex;
    margin-top: 8px;

    .el-card {
      flex: 1;
      margin-right: 10px;

      &:last-child {
        margin-right: 0;
      }

      :deep(.el-card__body) {
        padding: 8px 10px;

        .cardTitle {
          font-size: 15px;
          font-weight: 700;
          margin: 0 0 5px 0;
        }

        .greyTotal {
          margin: 0 10px 5px 0;
          display: flex;
          align-items: center;

          .greyTotalTitle {
            background-color: #f8f9fb;
            color: #9e9ea0;
            font-size: 14px;
            padding: 5px 18px;
            margin-right: 10px;
            border-radius: 5px;

            .greyTotalNum {
              color: #000;
              font-size: 16px;
              font-weight: 700;
            }
          }
        }

        .progressTitle {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #9e9ea0;
          margin: 5px;
        }

      }
    }
  }

  // 底部横着两个卡片
  .bottomTwoDiv {
    display: flex;
    margin-top: 8px;

    .el-card {
      flex: 1;
      margin-right: 10px;

      &:last-child {
        margin-right: 0;
      }

      :deep(.el-card__body) {
        padding: 8px 10px;

        .cardTitle {
          font-size: 15px;
          font-weight: 700;
          margin: 0 0 5px 0;
        }

        .greyTotal {
          margin: 0 10px 5px 0;
          display: flex;
          align-items: center;

          .greyTotalTitle {
            background-color: #f8f9fb;
            color: #9e9ea0;
            font-size: 14px;
            padding: 5px 18px;
            margin-right: 10px;
            border-radius: 5px;

            .greyTotalNum {
              color: #000;
              font-size: 16px;
              font-weight: 700;
            }
          }
        }

        .progressTitle {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #9e9ea0;
          margin: 5px;
        }

        .processCircle {
          display: flex;
          width: 100%;
          padding-top: 6px;

          .processBlue,
          .processYellow {
            width: 50%;
            display: flex;

            .processBlueDetail {
              margin-left: 5px;

              .vforDateNum {
                display: flex;
                justify-content: center;
                align-items: center;

                span {
                  width: 8px;
                  height: 8px;
                  display: inline-block;
                  border-radius: 50%;
                  background-color: #00b2cd;
                  margin-right: 5px;
                }

                div {
                  color: #9e9ea0;
                  font-size: 13px;
                }
              }
            }

            .processYellowDetail {
              margin-left: 5px;

              .vforDateNum {
                display: flex;
                justify-content: center;
                align-items: center;

                span {
                  width: 8px;
                  height: 8px;
                  display: inline-block;
                  border-radius: 50%;
                  background-color: #ffb765;
                  margin-right: 5px;
                }

                div {
                  color: #9e9ea0;
                  font-size: 13px;
                }
              }
            }
          }
        }
      }
    }
  }

  // echarts图表
  .chart {
    width: 450px;
    height: 120px;
  }

  #dbBarCharts,
  #dbLineCharts {
    width: 450px;
    height: 140px;
  }

  .icon-box {
    display: flex;
    flex-wrap: wrap;
    margin-top: 21px;

    .icon-box-item {
      position: relative;
      border-radius: 10px;
      width: 100px;
      height: 100px;
      margin-left: 25px;
      text-align: center;
      transition: box-shadow 0.5s, background-color 0.5s;
      padding: 8px;
      cursor: pointer;

      .homeimg {
        width: 70px;
        height: 70px;
      }

      .moduleIcon {
        width: 70px;
        height: 70px;
        border-radius: 15px;
        margin-left: 15px;
        padding-top: 10px;
        margin-bottom: 5px;
        box-sizing: border-box;
        color: #fff;

        .icont {
          margin-top: 5px;
        }
      }
    }

    .tasks::before {
      position: absolute;
      top: 0px;
      left: 80px;
      content: '6';
      width: 25px;
      height: 20px;
      background-color: red;
      border-radius: 30%;
      color: white;
      font-size: 14px;
    }

    .tasks1::before {
      position: absolute;
      top: 0px;
      left: 80px;
      content: '3';
      width: 25px;
      height: 20px;
      background-color: red;
      border-radius: 30%;
      color: white;
      font-size: 14px;
    }

    .icon-box-item:hover {
      box-shadow: #ccc 0px 0px 3px;
      background-color: #f8f6f6;
    }
  }

  /*日历样式修改*/
  .data-analysis {
    width: 100%;
    height: 200px;

    .el-calendar {
      width: 100%;
      height: 100%;

      :deep(.el-calendar__header) {
        padding: 5px;
      }

      :deep(.el-calendar__body) {
        padding: 5px;
        height: calc(100% - 45px);

        .el-calendar-table thead th {
          padding: 0;
        }

        .el-calendar-table__row {
          .el-calendar-day {
            padding: 5px;
            height: 20px;
            text-align: center;
            position: relative;

            .el-badge {
              position: absolute;
              right: 24px;
              top: 5px;

              .el-badge__content.is-fixed.is-dot {
                right: -5px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
